<template>
  <div class="footer">
    <p></p>
    <div class="page-footer-wrapper">
      <div class="page-footer">
        <div class="page-fotter_top">
          <template v-if="$route.path == '/indexView' ? index_footer : ''">
            <div
              class="top1 indexs"
              v-for="{
                foid,
                foot_title,
                foot_1,
                foot_2,
                foot_3,
                foot_4,
                foot_5,
                foot_6,
                foot_7,
                foot_8,
                foot_9,
                foot_10,
              } in index_footer"
              :key="foid"
            >
              <div class="title">{{ foot_title }}</div>
              <ul class="links">
                <li>
                  <a href="">{{ foot_1 }}</a>
                </li>
                <li>
                  <a href="">{{ foot_2 }}</a>
                </li>
                <li>
                  <a href="">{{ foot_3 }}</a>
                </li>
                <li>
                  <a href="">{{ foot_4 }}</a>
                </li>
                <li>
                  <a href="">{{ foot_5 }}</a>
                </li>
                <li>
                  <a href="">{{ foot_6 }}</a>
                </li>
                <li>
                  <a href="">{{ foot_7 }}</a>
                </li>
                <li>
                  <a href="">{{ foot_8 }}</a>
                </li>
                <li>
                  <a href="">{{ foot_9 }}</a>
                </li>
                <li>
                  <a href="">{{ foot_10 }}</a>
                </li>
              </ul>
            </div>
          </template>
          <template v-if="$route.path == '/support' ? support_footer : ''">
            <div
              class="top1 supports"
              v-for="{
                foid,
                foot_title,
                foot_1,
                foot_2,
                foot_3,
                foot_4,
                foot_5,
                foot_6,
                foot_7,
                foot_8,
                foot_9,
                foot_10,
              } in support_footer"
              :key="foid"
            >
              <div class="title">{{ foot_title }}</div>
              <ul class="links">
                <li>
                  <a href="">{{ foot_1 }}</a>
                </li>
                <li>
                  <a href="">{{ foot_2 }}</a>
                </li>
                <li>
                  <a href="">{{ foot_3 }}</a>
                </li>
                <li>
                  <a href="">{{ foot_4 }}</a>
                </li>
                <li>
                  <a href="">{{ foot_5 }}</a>
                </li>
                <li>
                  <a href="">{{ foot_6 }}</a>
                </li>
                <li>
                  <a href="">{{ foot_7 }}</a>
                </li>
                <li>
                  <a href="">{{ foot_8 }}</a>
                </li>
                <li>
                  <a href="">{{ foot_9 }}</a>
                </li>
                <li>
                  <a href="">{{ foot_10 }}</a>
                </li>
              </ul>
            </div>
          </template>
        </div>
        <div class="last">
          <div class="page-fotter_center">
            <div class="center-container">
              <dir class="iconfont icon-tubiaoxinfengyoujian"></dir>
              <div class="text">
                <span>订阅最新消息</span>
              </div>
              <div class="button">
                <el-button>订阅</el-button>
              </div>
            </div>
          </div>
          <div class="page-fotter_bottom">
            <div class="text">关注 NVIDIA</div>
            <a href="">
              <span class="iconfont icon-tubiaoweibo"></span>
            </a>
            <a href="">
              <span class="iconfont icon-tubiaoweixin"></span>
            </a>
            <a href="">
              <span class="iconfont icon-tubiaodouyin"></span>
            </a>
            <a href="">
              <span class="iconfont icon-tubiaoyouku"></span>
            </a>
          </div>
        </div>
      </div>
    </div>

    <!--  -->
    <!--  -->
    <div class="page-footer-last">
      <div class="contanier">
        <div class="lin1">
          <div class="logo">
            <div class="iconfont icon-tubiaonvidia"></div>
            <img src="../assets/img/nvidia.png" alt="" />
          </div>
          <div class="china">CHN-中国</div>
        </div>
        <ul class="lin2">
          <li><a href="">隐私声明</a></li>
          <li><a href="">法律事宜</a></li>
          <li><a href="">联系我们</a></li>
        </ul>
        <div class="lin3">
          <div class="text">Copyright © 2022 NVIDIA Corporation</div>
          <a href="">京ICP备18033986号-1</a>
        </div>
      </div>
    </div>
    <!--  -->
    <!--  -->
    <br />
    <br />
    <p></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      index_footer: null,
      support_footer: null,
    };
  },
  mounted() {
    this.getIndex_Footer();
    this.getSupport_Footer();
  },
  methods: {
    // 获取support_footer数据
    getSupport_Footer() {
      this.axios.get("/footer").then((res) => {
        console.log(res);
        this.support_footer = res.data;
      });
    },
    // 获取index_footer数据
    getIndex_Footer() {
      this.axios.get("/footer").then((res) => {
        console.log(res);
        this.index_footer = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.footer {
  p {
    padding-bottom: 20px;
  }
  .page-footer-wrapper {
    background-color: #000;

    .page-footer {
      padding: 60px 0;
      margin: 0 auto;
      width: 1280px;
      // //////////////////////////////////////////////////////
      .last {
        display: flex;
        align-items: center;
        justify-content: space-between;
        //
        .page-fotter_bottom {
          display: flex;
          align-items: center;
          a {
            margin-right: 18px;
            span {
              font-size: 30px;
            }
          }
          .text {
            font-size: 16px;
            color: #747474;
            display: inline-block;
            margin-right: 20px;
            height: 45px;
            vertical-align: top;
            padding-top: 12px;
          }
        }
        //
        .page-fotter_center {
          width: 525px;

          .center-container {
            display: flex;
            justify-content: start;
            align-items: center;

            .iconfont {
              font-size: 50px;
            }
            .text {
              color: #fff;
              font-size: 21px;
              margin-left: 30px;
            }
            .button {
              margin-left: 30px;
              .el-button {
                border-radius: 0;
                color: #fff;
                background-color: #76b900;
                border: 0;
              }
            }
          }
        }
      }
      //
      .page-fotter_top {
        width: 100%;
        text-align: left;
        display: flex;
        justify-content: space-between;

        .top1 {
          width: 100%;
          padding-right: 47px;
          .links {
            margin: 10px 0 50px 0;
            li {
              margin-right: 25px;
              display: block;
              margin-bottom: 5px;

              a {
                color: #76b900;
              }
            }
          }
          .title {
            width: 100%;
            font-size: 24px;
            line-height: 26px;
            text-align: left;
            padding-bottom: 12px;
            font-weight: bold;
            color: #fff;
            border-bottom: 1px solid #747474;
          }
        }
      }
    }
  }
  .page-footer-last {
    background-color: #fff;
    width: 100%;

    .contanier {
      width: 1250px;
      margin: 0 auto;
      padding: 30px;

      .lin1 {
        display: flex;
        justify-content: space-between;
        .logo {
          display: flex;
          align-items: center;
          margin-bottom: 15px;

          div {
            font-size: 30px;
            margin-right: 10px;
          }
          img {
            height: 20px;
          }
        }
        .china {
          font-weight: 900;
          font-size: 17px;
          color: #ccc;
          margin-bottom: 20px;
        }
      }
      .lin2 {
        display: flex;
        margin-bottom: 4px;

        li {
          padding-right: 10px;
          margin-right: 5px;
          border-right: 1px solid #ccc;
          a {
            color: #ccc;
          }
        }
      }
      .lin3 {
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #ccc;
        .text {
          border-right: 1px solid #ccc;
          padding: 0 5px;
        }
        a {
          margin-left: 5px;
          color: #ccc;
        }
      }
    }
  }
}
</style>